<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="60" label="序号" />

        <el-table-column prop="outName" label="操作" width="120" />
        <el-table-column prop="outSum" label="数量" width="120" />
        <el-table-column prop="outThing" label="出入库的东西" width="120" />
        <el-table-column prop="outCode" label="编码" width="120" />
        <el-table-column prop="addProp" label="添加人" width="120" />
        <el-table-column prop="addTime" label="添加时间" width="120">
            <template #default="scoped">
                {{ moment(scoped.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>


        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scoped">
                <el-button link type="primary" size="small" @click="OngData(scoped.row)">
                    详细信息
                </el-button>
                <el-button link type="primary" size="small">Edit</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- 查看详细信息 -->
    <el-dialog v-model="OutGetData" title="详细信息" width="400" center>
        <el-form :model="Outdata">

            <el-form-item label="编号:" :label-width="formLabelWidth">{{ Outdata.id }}</el-form-item>

            <el-form-item label="编码:" :label-width="formLabelWidth">{{ Outdata.outCode }}</el-form-item>

            <el-form-item label="操作:" :label-width="formLabelWidth">{{ Outdata.outName }}</el-form-item>

            <el-form-item label="数量:" :label-width="formLabelWidth">{{ Outdata.outSum }}</el-form-item>

 
            <el-form-item label="出入库的东西:" :label-width="formLabelWidth">{{ Outdata.outThing }}</el-form-item>

            <el-form-item label="成品库名称:" :label-width="formLabelWidth">
                <span v-if="Outdata.finishedName == '测试'"></span>
                <span v-if="Outdata.finishedName != '测试'">{{ Outdata.finishedName }}</span>
            </el-form-item>

            <el-form-item label="材料库名称:" :label-width="formLabelWidth">
                <span v-if="Outdata.materialName == '测试'"></span>
                <span v-if="Outdata.materialName != '测试'">{{ Outdata.materialName }}</span>
            </el-form-item>

            <el-form-item label="来料检测编号:" :label-width="formLabelWidth">{{ Outdata.incomingCode }}</el-form-item>

            <el-form-item label="成品检测编号:" :label-width="formLabelWidth">{{ Outdata.finishCode }}</el-form-item>

            <el-form-item label="添加人:" :label-width="formLabelWidth">{{ Outdata.addProp }}</el-form-item>

            <el-form-item label="添加时间:" :label-width="formLabelWidth">{{ Outdata.addTime }}</el-form-item>

            <el-form-item label="修改人:" :label-width="formLabelWidth">{{ Outdata.updProp }}</el-form-item>

            <el-form-item label="修改时间:" :label-width="formLabelWidth">{{ Outdata.updTime }}</el-form-item>




        </el-form>
    </el-dialog>

</template>

<script lang="ts" setup>

import { ref, reactive, onMounted } from 'vue'
import Mesaxios from '../../Http/MesHelp'
import moment from 'moment';
const formLabelWidth = '140px'

const handleClick = () => {
    console.log('click')
}

const tableData = ref([])
const OutorinShow = () => {
    Mesaxios.get("/api/Storehouse/OutorinShow").then(res => {
        tableData.value = res.data.data.list
        console.log(tableData.value)
    })
}

//
const OutGetData = ref(false)
const Outdata = ref({
    addProp: "张三",
    addTime: "2025-09-16T19:39:09.831134",
    finishCode: "FP0001",
    finishId: 1,
    finishedName: "蓝牙耳机存放库",
    id: 2,
    incomingCode: "",
    materialName: "测试",
    outCode: "Or002",
    outName: "成品入库",
    outStates: "未通过",
    outSum: 15,
    outThing: "蓝牙耳机",
    updProp: null,
    updTime: null,
    wareId: 0,
})
const OngData = (data: any) => {
    //alert("weropisdfklj");
    OutGetData.value = true
    Outdata.value.addProp = data.addProp
    Outdata.value.addTime = data.addTime
    Outdata.value.finishCode = data.finishCode
    Outdata.value.finishId = data.finishId
    Outdata.value.finishedName = data.finishedName
    Outdata.value.id = data.id
    Outdata.value.incomingCode = data.incomingCode
    Outdata.value.materialName = data.materialName
    Outdata.value.outCode = data.outCode
    Outdata.value.outName = data.outName
    Outdata.value.outStates = data.outStates
    Outdata.value.outSum = data.outSum
    Outdata.value.outThing = data.outThing
    Outdata.value.updProp = data.updProp
    Outdata.value.updTime = data.updTime
    Outdata.value.wareId = data.wareId
}
onMounted(() => {
    OutorinShow()
})

</script>
